<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/nav.css">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/p1.css">
    <link rel="stylesheet" href="css/p2.css">
    <link rel="stylesheet" href="css/p3.css">
    <link rel="stylesheet" href="css/p4.css">
    <link rel="stylesheet" href="css/p5.css">
    <script src="js/index.js"></script>


</head>

<body>
    <!-- 用五个大盒子把五个页面装起来，点击哪个页面哪个页面就显示，其他的隐藏 -->

    <!-- section里有p1,p2,p3,p4,p5五个页面 -->
    <section>




        <!-- 首页 -->
        <div class="p1">

            <!-- 顶部栏 -->
            <div class="title1">
                <a href="#" class="fl"></a>
                <h1></h1>
            </div>

            <!-- 每日推荐 -->
            <div class="tuijian">
                <h2>每日一推：油纸伞</h2>
                <p>“在下，柸中公仪斐，敢问姑娘芳名？”
                    她微微抬高油纸伞，垂眼定定看着他。
                    良久，声音似泠泠珠玉，
                    似乍然盛开的一朵冰冷扶桑花：“永安，卿酒酒。”
                </p>
                <p class="hua">——唐七公子《华胥引》</p>
                <img src="imgs/29.png" alt="">
            </div>


            <!-- 分类框 -->
            <div class="classification">
                <ul>
                    <li><a href="#">油纸伞</a></li>
                    <li><a href="#">中国结</a></li>
                    <li><a href="#">布艺</a></li>
                    <li><a href="#">宫灯</a></li>
                    <li id="piyingxi"><a href="#">皮影戏</a></li>
                    <li><a href="#">木版年画</a></li>
                    <li><a href="#">剪纸</a></li>
                    <li><a href="#">面塑</a></li>
                    <li><a href="#">刺绣</a></li>
                    <li><a href="#">陶瓷</a></li>
                    <li><a href="#">木雕</a></li>
                    <li><a href="#">琉璃</a></li>
                    <li><a href="#">竹编</a></li>
                    <li><a href="#">琉璃</a></li>
                    <li><a href="#">玉雕</a></li>
                </ul>
            </div>

        </div>


        <!-- 社区 -->
        <div class="p2">

            <!-- 顶部栏 -->
            <div class="title2">
                <span></span>
                <span>直播</span>
                <span>推荐</span>
                <span>关注</span>
                <span></span>
            </div>

            <!-- 视频框 -->
            <ul class="content">
                <li>
                    <img src="img/1.jpg" alt="">
                    <div class="inf">
                        <h3>指尖上绽放的“花朵”</h3>
                        <h5>
                            <span></span>
                            <span>沉香*</span>
                            <span> 5.7万</span>
                        </h5>
                    </div>
                </li>
                <li>
                    <img src="img/2.jfif" alt="">
                    <div class="inf">
                        <h3>假如你有一盏宫灯</h3>
                        <h5>
                            <span></span>
                            <span>青灯古酒</span>
                            <span> 2.3万</span>
                        </h5>
                    </div>
                </li>
                <li>
                    <img src="img/3.jpg" alt="">
                    <div class="inf">
                        <h3>心若似琉璃，岁月静好，听风吟，看雨落</h3>
                        <h5>
                            <span></span>
                            <span>离人愁</span>
                            <span> 60.6万</span>
                        </h5>
                    </div>
                </li>
                <li>
                    <img src="img/4.jfif" alt="">
                    <div class="inf">
                        <h3>千千结千千意</h3>
                        <h5>
                            <span></span>
                            <span>望穿秋色凝波</span>
                            <span> 500.8万</span>
                        </h5>
                    </div>
                </li>
                <li>
                    <img src="img/5.jfif" alt="">
                    <div class="inf">
                        <h3>戏如人生，人生如戏！一窗砂纸，演绎古今传奇。</h3>
                        <h5>
                            <span></span>
                            <span>墨染成画</span>
                            <span> 10.5万</span>
                        </h5>
                    </div>
                </li>
                <li>
                    <img src="img/6.jpg" alt="">
                    <div class="inf">
                        <h3>绣之艺，苏之娇古色古香古艺，娇手娇绣娇美。</h3>
                        <h5>
                            <span></span>
                            <span>城南花已开</span>
                            <span> 4.3万</span>
                        </h5>
                    </div>
                </li>
                <li>
                <li>
                    <img src="img/7.jfif" alt="">
                    <div class="inf">
                        <h3>白如玉、明如镜、薄如纸、声如磬</h3>
                        <h5>
                            <span></span>
                            <span>醉清风</span>
                            <span> 100万</span>
                        </h5>
                    </div>
                </li>
                <li>
                    <img src="img/8.jpg" alt="">
                    <div class="inf">
                        <h3>劈竹为条，蒙以兽皮，收拢如棍，张开如盖</h3>
                        <h5>
                            <span></span>
                            <span>拂袖</span>
                            <span> 22.3万</span>
                        </h5>
                    </div>
                </li>
            </ul>

            <!-- 搜索框 -->
            <div class="Search">
                <!-- 最上边搜索 -->
                <div class="shang">
                    <span><a href="#"></a></span>
                    <input type="text" name="" id="">
                    <span>搜索</span>
                </div>

                <!-- 猜你想搜 -->
                <div class="guess">
                    <h2>
                        <span> 猜你想搜</span>
                        <span>换一换</span>
                    </h2>
                    <ul>
                        <li>刺绣</li>
                        <li>油纸伞</li>
                        <li>皮影戏</li>
                        <li>剪纸</li>
                        <li>陶瓷</li>
                        <li>琉璃</li>
                    </ul>
                </div>

                <!-- 搜索发现 -->
                <div class="find">
                    <h4>搜索发现</h4>
                    <ul>
                        <li>惊！某手工艺人竟一天做出一尊雕像</li>
                        <li>木版年画的浪漫</li>
                        <li>如何辨别真假陶瓷</li>
                        <li>中国结的36种结法</li>
                        <li>琉璃到底有多好看</li>

                    </ul>
                </div>



            </div>


        </div>


        <!-- 商城 -->
        <div class="p3">

            <!-- 顶部栏 -->
            <div class="title3">
                <input type="text" name="" id="" class="search">
                <div class="fenlei">分类</div>
                <span class="mycar"></span>
                <span class="myorder1"></span>
            </div>

            <ul class="xuanze">
                <li><a href="#">猜你喜欢</a></li>
                <li><a href="#">手工艺品</a></li>
                <li><a href="#">工艺原料</a></li>
                <li><a href="#">文创周边</a></li>
            </ul>

            <!-- 商品框 -->
            <ul class="shangpin">
                <li>
                    <img src="img/10.jfif " alt="">
                    <div class=" inf">
                        <h3>一曲琵琶相思泪</h3>
                        <h5>
                            <span>￥</span>
                            <span>158</span>
                            <!-- <span></span> -->
                        </h5>
                    </div>
                </li>
                <li>
                    <img src="img/11.jfif" alt="">
                    <div class="inf">
                        <h3>一曲琵琶相思泪</h3>
                        <h5>
                            <span>￥</span>
                            <span>9.9</span>
                            <!-- <span></span> -->
                        </h5>
                    </div>
                </li>
                <li>
                    <img src="img/12.jfif" alt="">
                    <div class="inf">
                        <h3>一曲琵琶相思泪</h3>
                        <h5>
                            <span>￥</span>
                            <span>29.9</span>
                            <!-- <span></span> -->
                        </h5>
                    </div>
                </li>
                <li>
                    <img src="img/13.png" alt="">
                    <div class="inf">
                        <h3>一曲琵琶相思泪</h3>
                        <h5>
                            <span>￥</span>
                            <span>35</span>
                            <!-- <span></span> -->
                        </h5>
                    </div>
                </li>
                <li>
                    <img src="img/14.jfif" alt="">
                    <div class="inf">
                        <h3>一曲琵琶相思泪</h3>
                        <h5>
                            <span>￥</span>
                            <span>520</span>
                            <!-- <span></span> -->
                        </h5>
                    </div>
                </li>
                <li>
                    <img src="img/15.jpg" alt="">
                    <div class="inf">
                        <h3>一曲琵琶相思泪</h3>
                        <h5>
                            <span>￥</span>
                            <span>14.9</span>
                            <!-- <span></span> -->
                        </h5>
                    </div>
                </li>
                <li>
                    <img src="img/16.jpg" alt="">
                    <div class="inf">
                        <h3>一曲琵琶相思泪</h3>
                        <h5>
                            <span>￥</span>
                            <span>199</span>
                            <!-- <span></span> -->
                        </h5>
                    </div>
                </li>
                <li>
                    <img src="img/17.jfif" alt="">
                    <div class="inf">
                        <h3>一曲琵琶相思泪</h3>
                        <h5>
                            <span>￥</span>
                            <span>28</span>
                            <!-- <span></span> -->
                        </h5>
                    </div>
                </li>

            </ul>



        </div>


        <!-- 修复 -->
        <div class="p4">

            <!-- 顶部栏 -->
            <div class="title4">
                <span></span>
                <input type="text" name="" id="" class="search1">
                <span class="xiaoxi"></span>
                <span class="myorder2"></span>
            </div>

            <div class="people">
                <ul>
                    <li>
                        <div>
                            <h2>油纸伞大师-闻士善</h2>
                            <p>闻士善子承父业,祖上两代皆是做油纸伞的手工艺人...</p>
                        </div>
                        <img src="imgs/wen.jfif" alt="">

                    </li>
                    <li>
                        <div>
                            <h2>剪纸大师-赵英</h2>
                            <p>泰安市泰山剪纸非物质文化遗产传承人、民间艺术大师...</p>
                        </div>
                        <img src="imgs/zhao.webp" alt="">
                    </li>
                    <li>
                        <div>
                            <h2>宫灯大师-冯怀林</h2>
                            <p>山西省民间艺术大师...</p>
                        </div>
                        <img src="imgs/1111.png" alt="">
                    </li>
                    <li>
                        <div>
                            <h2>木雕大师-陆光正</h2>
                            <p>首批国家级非物质文化遗产代表性传承人...</p>
                        </div>
                        <img src="imgs/1112.jpg" alt="">
                    </li>
                    <li>
                        <div>
                            <h2>中国结大师-胡立华</h2>
                            <p>一位潜心研究“中国结”的手艺人...</p>
                        </div>
                        <img src="imgs/1113.jpg" alt="">
                    </li>
                    <li>
                        <div>
                            <h2>陶瓷大师-汪桂英</h2>
                            <p>中国陶瓷艺术大师...</p>
                        </div>
                        <img src="imgs/1114.jfif" alt="">
                    </li>
                    <li>
                        <div>
                            <h2>面塑大师-李双虎</h2>
                            <p>天下面塑出穆李</p>
                        </div>
                        <img src="imgs/1115.jpeg.crdownload" alt="">
                    </li>

                </ul>
            </div>
        </div>


        <!-- 我的 -->
        <div class="p5">

            <!-- 我的信息 -->
            <div class="info">
                <h1>
                    <span class="gengduo1"></span>
                </h1>
                <h1>
                    <span class="tou"></span>
                    <span class="ziliao">
                        <h2>烟雨</h2>
                        <p>个性签名</p>
                    </span>
                </h1>
                <ul>
                    <li>关注 1</li>
                    <li>粉丝 1</li>
                    <li>获赞 1</li>
                </ul>
            </div>

            <ul class="fenlei ">
                <li><a href="#">作品</a></li>
                <li><a href="#">喜欢</a></li>
                <li><a href="#">收藏</a></li>
            </ul>


            <!-- 作品 -->
            <div class="zuopin">

            </div>
            <!-- 消息 -->
            <div class="xiaoxi">

            </div>



        </div>


        <!-- 皮影戏界面 -->
        <div class="piyingxi">
            <div class="pipi">
                <h2>皮影戏</h2>
                <h6 id="fanhui">返回</h6>
            </div>

            <h1>[文化沿革]</h1>
            <div class="jieshao">
                皮影戏从有文字记载，已经有2000多年的历史，汉武帝爱妃李夫人染疾故去了，武帝的思念心切神情恍惚，终日不理朝政。大臣李少翁一日出门，路遇孩童手拿布娃娃玩耍，影子倒映于地栩栩如生。李少翁心中一动，用棉帛裁成李夫人影像，涂上色彩，并在手脚处装上木杆。入夜围方帷，张灯烛，恭请皇帝端坐帐中观看。武帝看罢龙颜大悦，就此爱不释手。这个载入《汉书》的爱情故事，被认为是皮影戏最早的渊源。
                <br /><br />中国皮影艺术从十三世纪元代起，随着军事远征和海陆交往，相继传入了波斯（伊朗）、阿拉伯、土耳其、暹罗（泰国）、缅甸、马来群岛、日本以及英、法、德、意、俄等亚欧各国。
                <br /><br />明武宗正德戊辰三年（1508年）北京曾举办百戏大会，皮影戏参加了演出。另传皮影自明中叶从兰州和华亭先传入河北涿州、后再传到京西、北郊农村，然后入城并形成东、西城两派。
                <br /><img src="img/001.webp" alt=""><br />
                从清人入关至清末民初，中国皮影戏艺术发展到了鼎盛时期。当时很多官第王府豪门旺族乡绅大户，都以请名师刻制影人、蓄置精工影箱、私养影班为荣。在民间乡村城镇，大大小小皮影戏班比比皆是，一乡一市有二三十个影班也不足为奇。无论逢年过节、喜庆丰收、祈福拜神、嫁娶宴客、添丁祝寿，都少不了搭台唱影。连本戏（连续剧）要通宵达旦或连演十天半月不止，一个庙会可出现几个影班搭台对擂唱影，热闹非凡，其盛状可想而知。
                <br /><br />清代北京皮影已很普及。除深受农民、市民欢迎外，还进入到宫廷。康熙时，礼亲王府设有八位食五品俸禄的官员专管影戏。嘉庆时逢年过节等喜庆日子还传皮影班进宅表演。当时的北京影戏班白天演木偶，夜晚则于堂会唱影戏，有不少京剧演员也参加影戏班演出。
                <br /><br />到了清代后期，曾有些地方官府害怕皮影戏的黑夜场所聚众起事，便禁演影戏，甚至捕办皮影艺人。皮影艺人还曾受清末白莲教起义的牵连，被以“玄灯匪”的罪名遭到查抄。日军入侵前后，又因社会动荡和连年战乱，民不聊生，致使盛极一时的皮影行业万户凋零，一蹶不振。
                <br /><br />1949年后，全国各地残存的皮影戏班、艺人又开始重新活跃，从1955年起，先后组织了全国和省、市级的皮影戏汇演，并屡次派团出国访问演出，进行文化艺术交流，颇有成果。但到“文革”时，皮影艺术再次遭“破四旧”的噩运，从此元气大伤。
                <br /><br /><img src="img/002.jfif" alt="">
            </div>

            <h1>[工艺流程]</h1>

            <div class="jieshao">
                中国地域广阔，各地的皮影都有自己的特色，但是皮影的制作程序大多相同，通常要经过选皮、制皮、画稿、过稿、镂刻、敷彩、发汗熨平、缀结合成等八道工序、手工雕刻3000余刀，是一个复杂奇妙的过程。皮影的艺术创意汲取了中国汉代帛画、画像石、画像砖和唐、宋寺院壁画之手法与风格。
                <br /><br />其制作过程是：先将羊皮、驴皮或其他兽皮的毛、血去净，然后经药物处理，使皮革变薄，呈半透明，涂上桐油，然后艺人们将各种人物的图谱描绘在上面，用各种型号的刀具刻凿后，再涂抹上颜色，上色时主要使用红、黄、青、绿、黑等五种纯色。
                <br /><br />雕刻时，一般都用阳刻，有时也用阴刻。绘画染色讲究女性发饰及衣饰多以花、草、云、凤等纹样为图案，男性则用龙、虎、水、云等纹样为图案。忠良人物为五分面，反面人物为七分面。人物造型与戏剧人物一样，生、旦、净、丑角色齐全。制成的皮影高的达55厘米，低的有10厘米左右。
                <br /><br />皮影人的四肢和头部是分别雕成的，用线联缀而成，以便表演时活动自如。一个皮影人，要用五根竹棍操纵，艺人手指灵活，常常玩得观众眼花缭乱。不仅手上功夫绝妙高超，嘴上还要说、念、打、唱，脚下还要制动锣鼓。演皮影的屏幕，是用一块1平方米大小的白纱布做成的。白纱布经过鱼油打磨后，变得挺括透亮。演出时，皮影紧贴屏幕活动，人影和五彩缤纷的颜色真切动人。皮影道具小，演出方便，且不受场地限制，演员也不需正规训练，所以深受人民的喜爱。在皮影戏盛行的地区，人们会亲切地称它为“一担挑”艺术。
                <br /><br />第一步　选皮
                <br /><br />由于皮影戏是民间艺术的缘故，各方面的情况都因地方不同而有所差异，制作材料也根据当地的使用兽皮的情况而定。在中国，较多使用牛皮、羊皮、驴皮、猪皮等等，其中牛皮是目前中国市场上应用最广泛的材质。各地皮影的原材料有所不同。比如陇东皮影的制作一般选用年轻、毛色黑的公牛皮，这种牛皮厚薄适中，质坚而柔韧，青中透明。
                <br /><br />第二步　制皮
                <br /><br />牛皮的炮制方法有两种：一是“净皮”，另一是“灰皮”。净皮的制作工艺是在牛皮选好后，放在洁净的凉水里浸泡两、三天（根据气温、牛皮和水的具体情况掌握），取出用刀刮制：第一道工序先刮去牛毛，第二次再刮去里皮的肉渣，第三次是逐渐刮薄，刮去里皮。每刮一次用清水浸泡一次，直到第四次精致细作，把皮刮薄泡亮为止。刮时一定要注意使皮子厚薄均匀，手劲要轻而稳，以免损伤皮子。刮好后撑于木架之上，荫干即成。
                <br /><br />制皮的方式有很多，以陕西皮影为例，通常有两种方法炮制它的原材料——牛皮：“净皮”和“灰皮”。“净皮”的制作工艺是先将选好的牛皮放在洁净的凉水里浸泡两三天，取出用刀刮制四次，每刮一次用清水浸泡一次，直到第四次精工细作，把皮刮薄泡亮为止。刮好后撑在木架上阴干，晾到净亮透明时即可制作皮影。“灰皮”也称为“软刮”，浸泡皮时把氧化钙（石灰）、硫化钠（臭火碱）、硫酸、硫酸铵等药剂配方化入水中，将牛皮反复浸泡刮制而成。这种方法刮出来的皮料，近似玻璃，更宜雕刻。
                <br /><br />第三步　画稿
                <br /><br />制作皮影时有专门的画稿，称为“样谱”，这些设计图稿世代相传。
                <br /><br />第四步　过稿
                <br /><br />雕刻艺人将刮好的皮分解成块，用湿布潮软后，再用特制的推板，稍加油汁逐次推摩，使牛皮更加平展光滑，并能解除皮质的收缩性，然后才能描图样。画稿前对成品皮的合理使用，也是一项细致的工作。薄而透亮的成品皮，要用于头、胸、腹这些显要部位；较厚而色暗的成品皮，可用于腿部和其他一般道具上。这样既可节约原料，又提高了皮影质量，同时也使皮影人物上轻下重，在挑签表演和静置靠站时安稳、趁手。接下来是描图样，用钢针把各部件的轮廓和设计图案纹样分别拷贝、描绘在皮面上，这叫“过稿”，再把皮子放在枣木或梨木板上进行刻制。
                <br /><br />第五步　镂刻
                <br /><br />雕刻刀具一般都有十一、二把，甚至三十把以上。刀具有宽窄不同的斜口刀（尖刀）、平刀、圆刀、三角刀、花口刀等，分工很讲究，艺人需要熟练各种刀具的不同使用方法。根据传统经验，在刻制线状的纹样时要用平刀去扎；在刻制直线条的纹样时用平刀去推；对于传统服饰的袖头袄边的圆型花纹则需要用凿刀去凿；一些曲折多变的花纹图样，则须用斜口刀刻制。艺人雕刻的口诀如下：樱花平刀扎，万字平刀推，袖头袄边凿刀上，花朵尖刀刻。雕刻线有虚实之分，还有暗线、绘线之分。
                <br /><br />虚线为阴刻，即镂空形体线而成，皮影多为这种线法。实线保留形体轮廓挖去余部，为阳刻，多用于生旦、须丑的白脸，凡白色的物体都用阳刻法。虚实线沿轮廓的两侧刻出断续的镂空线，多用于景片建筑的刻制。暗线则用刀划线而不透皮，多在活动关节处。绘线是以笔代之，以表现细致的物体。刻制皮影有口诀相传，程序如下：刻人面——先刻头帽后刻脸，眼眉刻完再刻鼻子尖。刻衣饰花纹——卍字先把四方画，四边咬茬转着扎。雪花先竖画，然后左右再打叉。六棂丢出齿，挑成雪花花。刻盔甲——黄靠甲，先把眼眼打，拾岔岔，人字三角扎。刻建筑装饰——空心桃儿落落梅，雪里竹梅六角龟，一满都在水字格。
                <br /><br />第六步　敷彩
                <br /><br />皮影雕完之后是敷彩。老艺人用色十分讲究。大都自己用紫铜、银朱、普兰等矿植物炮制出大红、大绿、杏黄等颜色着色。着色的方法也各有不同。以陕西皮影为例，敷彩的方法是先把制好的纯色化入稍大的酒盅内，放进几块用精皮熬制的透明皮胶，然后把盅子放在特制的灯架上，下边点燃酒精灯火，使胶色交融成为粥状，趁热敷在影人上。虽是色彩种类不多，但老艺人善于配色，再加上点染的浓淡变化，使色彩效果异常绚烂。
                <br /><br />第七步　发汗熨平
                <br /><br />敷色后还要给皮影脱水发汗，这是一项关键性工艺。它的目的是为了使敷彩经过适当高温吃入牛皮内，并使皮内保留的水分得以挥发。脱水发汗的方法很多，有的用薄木板夹住皮影部件，压在热炕的席下；也有的用平布包裹皮影部件，以烙铁或电熨斗烫；此外还有一种土办法是用土坯或砖块搭成人字形，下面用麦秸烧热，压平皮影使之脱水发汗。脱水发汗的成败关键在于掌握温度火候。过去艺人们掌握火候的土办法叫“弹指点水”，就是用手指蘸水或唾液弹滴在熨具上，观察水的变化，判断温度的高低。既看水点所起泡沫大小的变化，也看水分蒸发的速度快慢。所要求的温度一般在摄氏七十度上下。温度恰当，皮子脱水发汗顺利，皮内水分挥发了，颜色也吃入皮内了，皮影色泽鲜美，且久不褪色，而胶质也可溶化封闭住皮子的毛孔，使皮影永久不翘扭变形。如果温度过高则会使皮子缩为一团，工艺全部报废；温度不足，胶色就不能溶入肉皮，皮内的水分难以排尽，造成皮影人物的色泽不亮，时间长了还会变形。
                <br /><br />第八步　缀结完成
                <br /><br />为了让皮影动作灵活，一个完整皮影人物的形体，从头到脚通常有头颅、胸、腹、双腿、双臂、双肘、双手，共计十一个部件。头部——头包括颜面、帽、须和颈部，下端为楔子，演出时插入胸上部的卡口内，不用时则卸下保管。胸部——上部装置卡口，皮影人头就插在那里。与胸上侧同点相钉结的有两臂，各分为上下臂两节，小臂下有手相连。腹部——腹部上方与胸相连，下方与双腿相连，腿部与足为一个整体（包括靴鞋在内）。皮影人物各个关节部分都要刻出轮盘式的枢纽（老艺人称之为“骨缝”），以避免肢体叠合处出现过多重影。连接骨缝的点叫“骨眼”。骨眼的选定关系到影人的造型美感，选择恰当会有精神抖擞之相，反之则显得佝偻垂死，萎靡不振。选好骨眼后，用牛皮刻成的枢钉或细牛皮条搓成的线缀结合成，十一个主要部件就这样装成了一个完整的影人。为了表演的需要，还要装置三根竹棍作操纵杆，也就是签子。文场人物在胸部的上前部装置一根签子，用铁丝相连，使影人能反转活动，再给双手处各装置一根签子，便于双手舞动。而武场人物胸部签子的装置位置在胸后上部（即后肩上部），以便于武打，使皮影人能做出跑、立、坐、卧、躺、滚、爬、打斗等百般姿态。
                <img src="imgs/100.jpg" alt="">

            </div>






        </div>


    </section>




    <!-- 底部导航栏 -->
    <div class="nav">
        <ul class="navul">
            <li><a href="#">首页</a></li>
            <li><a href="#">社区</a></li>
            <li><a href="#">商城</a></li>
            <li><a href="#">修复</a></li>
            <li><a href="#">我的</a></li>
        </ul>
    </div>

</body>

</html>